<template>
	<div>
		<div class="head-top">
			<mt-header title="报纸">
				<mt-button icon="back" slot="left" @click='back'></mt-button>
			</mt-header>
		</div>
		<div class="content">
			<mt-loadmore :maxDistance="0" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
				<div class="main">
					<div class="novel" v-for="(item,index) in dataList" :key="index">
						<router-link class="novel-content" :to='{name:"newspapercontent", params:{parperdata:JSON.stringify(item)}}'>
							<img :src="paperImgSrc+(item.max_file_name).substring(0,4)+'.jpg'" alt="" onerror="this.src='../../../../static/home/tushu.png'" width="100px" height="140px" />
							<span v-text="item.paper_name">边城</span>
						</router-link>
					</div>
				</div>
			</mt-loadmore>
		</div>
	</div>
</template>

<script>
import api from "./../../api/api.js";
import { Indicator } from "mint-ui";

export default {
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      allLoaded: false
    };
  },
  created() {
    this.paperImgSrc = api.paperImgSrc;
    this.userId = localStorage.getItem("userid");
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    this.getinfo();
  },
  methods: {
    loadTop: function() {
      //组件提供的下拉触发方法
      //下拉加载
      console.log("下拉");
      this.pageIndex = 1;
      this.getinfo();
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      console.log("上拉");
      this.getmore();
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    getmore() {
      //  1.0 实现this.pageindex值的增加1
      this.pageIndex++;
      //	2.0 获取当前this.pageindex值对应的分页数据
      this.getinfo();
    },
    back() {
      this.$router.back(-1);
    },
    getinfo() {
      Indicator.open("加载中...");
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["paper_name"],
            constraint: [],
            time: this.datevalue,
            userId: this.userId,
            pageSize: 16,
            allLoaded: false,
            currentPage: this.pageIndex,
            resourceType: 4,
            maxvalue: ["date", "file_name"],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            if (this.pageIndex == 1) {
              this.dataList = response.data.data;
              console.log(this.dataList);
            } else {
              let data = this.dataList;
              this.dataList = data.concat(response.data.data);
              console.log(this.dataList);
            }
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
.content {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 90vh;
}
.head-top {
  margin-bottom: 20px;
}

.main {
  width: 92%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  flex-wrap: wrap;
  flex-flow: row wrap;
  /*background: sandybrown;*/
}

.main .novel {
  margin-bottom: 20px;
  width: 45%;
  /*background: skyblue;*/
}

.novel-content img {
  border-radius: 8px;
  width: 100%;
  height: 60px;
}

.main .news {
  margin-top: 10px;
  word-wrap: break-word;
  word-break: normal;
  font-size: 14px;
  color: #252525;
}
</style>